<template>
  <div class="custom-view">
    <component v-bind:is="currentView" ref="component"></component>
  </div>
</template>

<script>
import ShareFunc from '@/common/ShareFunc'
import shareApi from "@/api/shareApi";
import {defineComponent} from 'vue';

export default {
  name: "RxCustomColumn",
  props: ["config"],
  data() {
    return {
      currentView: "",
      defScript: "export default {\n" +
          "    props: {\n" +
          "    },\n" +
          "   //数据定义\n" +
          "    data(){\n" +
          "        return {\n" +
          "        }\n" +
          "    },\n" +
          "    //初始化时加载\n" +
          "    created(){\n" +
          "    },\n" +
          "    //页面自定义函数\n" +
          "    methods:{\n" +
          "    },\n" +
          "    //页面自定义观察函数\n" +
          "    watch:{}\n" +
          "}",
      customPage: "",
    }
  },
  created() {
    this.init();
  },
  methods: {
    i18n(name, text, key) {
      return this.$ti18(name, text, "portalLang", key);
    },
    init() {
      let alias = "";
      if (this.config && this.config.alias) {
        alias = this.config.alias
      } else {
        return
      }
      shareApi.getCustomColumnByAlias(alias).then(res => {
        if (!res || res.length == 0) {
          return;
        }
        this.customPage = res[0];
        //加载js
        var jsScript = "";
        var script_ = "";
        if (this.customPage.javascript) {
          jsScript = this.customPage.javascript;
        } else {
          //设置默认js
          jsScript = this.defScript;
        }
        jsScript = this.replaceDefault(jsScript);
        script_ = JSON.parse(jsScript);
        if (this.customPage.mobileTemplate) {
          let key="custom-page-view" + this.customPage.alias;
          window.app.component(key, {
              template: this.customPage.mobileTemplate,
              mixins: [ShareFunc],
              ...script_
          });
          this.currentView =key;
          this.loadStyle();
        }
      });
    },
    //加载css
    loadStyle() {
      var cssStyle = "<style scoped>" + this.customPage.cssStyle + "</style>"
      var style = "";
      var styleMath = cssStyle.match(/<style scoped>([\s\S]*)<\/style>/) || cssStyle.match(/<style>([\s\S]*)<\/style>/);
      if (styleMath != null) {
        style = styleMath[1];
      }
      var newStyle = document.getElementById("customStyle" + this.customPage.alias);
      if (!newStyle) {
        newStyle = document.createElement('style');
        document.getElementsByTagName('head')[0].appendChild(newStyle)
      }
      newStyle.id = "customStyle" + this.customPage.alias;
      newStyle.innerHTML = style;
    },
    replaceDefault(text) {
      text = text.replace(/export\s*?default\s*?\{/img, "export default {");
      let index = text.indexOf("export default {");
      if (index != -1) {
        text = text.substring(index + 14);
      }
      return text;
    }
  }
}
</script>

<style scoped>
.custom-view {
  overflow: hidden;
  background-color: white;
  width: calc(100% - 1.2rem);
  margin-left: .6rem;
  border-radius: 5px;
  margin-top: .86rem;
  box-shadow: 0rem 0rem 0.2rem 0rem #dce0eb;
  border-radius: 0.29rem;
}
</style>